<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <link rel="stylesheet" href="/assets/plugins/amazeui/amazeui.css"/>
    <link rel="stylesheet" href="/assets/css/hema.app.css"/>
    <script src="/assets/plugins/jquery/jquery.min.js"></script>
    <title>商品列表</title>
</head>
<body class="select-data">
<!-- 工具栏 -->
<div class="page_toolbar am-u-sm-12 am-margin-bottom-xs am-cf">
    <form class="toolbar-form" action="{:url('food.data.goods/lists')}">
        <div class="am-u-sm-12">
            <div class="am-fr">
                <div class="am-form-group am-fr">
                    <select name="shop_id" data-am-selected="{searchBox: 1, btnSize: 'sm',  placeholder: '全部门店', maxHeight: 400}">
                        <option value=""></option>
                        {if isset($shoplist)}
                            {foreach $shoplist as $item}
                            <option value="{$item['shop_id']}" {$shop_id == $item['shop_id'] ?'selected':''}>{$item['shop_name']}</option>
                            {/foreach}
                        {/if}         
                    </select>
                    <div class="am-input-group am-input-group-sm tpl-form-border-form am-fr">
                        <div class="am-input-group-btn am-fl">
                            <button class="am-btn am-btn-default am-icon-search" type="submit"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="am-scrollable-horizontal am-u-sm-12">
    <table width="100%" class="am-table am-table-hover tpl-table-black">
        <thead>
			<tr>
				<th>
					<label class="am-checkbox">
						<input data-am-ucheck data-check="all" type="checkbox">
					</label>
				</th>
				<th>编号</th>
				<th>图片</th>
				<th>名称</th>
				<th>分类</th>
			</tr>
        </thead>
        <tbody>
        {if !$list->isEmpty()}
            {foreach $list as $item}
            <tr>
                <td class="am-text-middle">
                    <label class="am-checkbox">
                        <input data-am-ucheck data-check="item" data-params="{$item['params']}" type="checkbox">
                    </label>
                </td>
                <td class="am-text-middle">{$item['goods_id']}</td>
                <td class="am-text-middle">
                    <img src="{$item['image'][0]['url']}" width="50" height="50" alt="商品图片">
                </td>
                <td class="am-text-middle">
                    <p class="item-title">{$item['goods_name']}</p>
                </td>
                <td class="am-text-middle">{$item['category']['name']}</td>
            </tr>
			{/foreach}
        {else /}
            <tr>
                <td colspan="5" class="am-text-center">暂无记录</td>
            </tr>
        {/if}
        </tbody>
    </table>
</div>
<div class="am-u-lg-12 am-cf">
    <div class="am-fr">{:$list->render()} </div>
    <div class="am-fr pagination-total am-margin-right">
		<div class="am-vertical-align-middle">总记录：{:$list->total()}</div>
    </div>
</div>
<script src="/assets/plugins/amazeui/amazeui.js"></script>
<script>

    /**
     * 获取已选择的数据
     * @returns {Array}
     */
    function getSelectedData() {
        var data = [];
        $('input[data-check=item]:checked').each(function () {
            data.push($(this).data('params'));
        });
        return data;
    }

    $(function () {

        // 全选框元素
        var $checkAll = $('input[data-check=all]')
            , $checkItem = $('input[data-check=item]')
            , itemCount = $checkItem.length;

        // 复选框: 全选和反选
        $checkAll.change(function () {
            $checkItem.prop('checked', this.checked);
        });

        // 复选框: 子元素
        $checkItem.change(function () {
            if (!this.checked) {
                $checkAll.prop('checked', false);
            } else {
                var checkedItemNum = $checkItem.filter(':checked').length;
                checkedItemNum === itemCount && $checkAll.prop('checked', true);
            }
        });

    });
</script>
</body>
</html>
